<template>
  <div class="ms-list">
    <el-row class="operation">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">
          <icon style="color: #0088cc" name="home"></icon>
        </el-breadcrumb-item>
        <el-breadcrumb-item>客户管理</el-breadcrumb-item>
        <el-breadcrumb-item>问卷管理</el-breadcrumb-item>
        <el-breadcrumb-item>答卷分析</el-breadcrumb-item>
      </el-breadcrumb>
      <el-button-group>
        <router-link type="primary" size="small" :to="{path:'/survey/data-statistic',query:{search: this.search}}">
          返回问卷报表
        </router-link>
        <el-button type="primary" size="small" @click="echartRow()">XLS报表导出</el-button>
      </el-button-group>
    </el-row>

    <ms-search :data="search.list" @click="updateConditions"></ms-search>
    <h1 style="text-align: center; margin-top: 40px; margin-bottom: 40px;">{{title}}</h1>
    <div style="width: 1000px;margin-left:auto;margin-right:auto; margin-bottom: 10px;"
         v-for="(value,key) in recombineData" :key="key">
      <el-card>
        <h3 style="text-align: center;">问题:{{key.split('-')[1]}}</h3>
        <h4 style="text-align: center;">答题人数:{{value.rows.length}}人</h4>
        <ve-ring v-if="key.split('-')[2]==='1' || key.split('-')[2]==='4'"
                 :data="value" :title="value" :settings="chartSetting" :loading="chartLoading"
                 :legend-visible="false"></ve-ring>
        <ve-histogram v-if="key.split('-')[2]==='2'"
                      :data="value" :title="value" :loading="chartLoading"
                      :legend-visible="false"></ve-histogram>
        <el-table size="small" v-loading="value.rows.loading" stripe border :data="value.rows" :fit="true">
          <el-table-column prop="option" label="选项"></el-table-column>
          <el-table-column prop="num" label="数量"></el-table-column>
        </el-table>
      </el-card>
    </div>
  </div>
</template>

<script>
  import MsSearch from '@/components/common/Search.vue'
  import Api from '@/api/customer/platform/data-statistic'
  import { SEARCH_CONDITION } from '@/models/customer/platform/data-statistic-pie'
  import 'v-charts/lib/style.css'

  export default {
    components: {
      MsSearch
    },
    created () {
      this.search.list = SEARCH_CONDITION
      this.search.list.forEach(item => {
        item.value = ''
      })
      if (this.$route.query.surveyId !== undefined) {
        this.search.condition.surveyId = this.$route.query.surveyId
      }
      if (this.$route.query.title !== undefined) {
        this.search.condition.title = this.$route.query.title
        this.search.list[0].value = this.$route.query.title
      }
      this.chartData = {}
      this.question = ''
      this.requestList()
      this.data = {}
    },
    data () {
      return {
        search: {
          list: [],
          condition: {}
        },
        chartData: {},
        data: {},
        myCahrt: '',
        value: {},
        title: '',
        question: '',
        chartLoading: true,
        row: {
          form: {
            typeId: '',
            question: ''
          },
          title: '报表导出'
        },
        chartSetting: {
          limitShowNum: 0,
          radius: ['40%', '65%']
        },
        typeId: '',
//        count: '',
        table: {
          pagination: {}
        }
      }
    },
    computed: {
      recombineData () {
        let data = {}
        if (Object.keys(this.chartData).length === 0) {
          this.title = '暂无数据'
        }
        for (let key in this.chartData) {
          if (Object.keys(this.chartData[key]).length > 0) {
            this.question = key.split('-')[1]
            this.typeId = key.split('-')[2]
            if (this.typeId === '3') {
              continue
            }
            data[key] = {data: {}, question: {}, empty: false}
            data[key].columns = ['option', 'num']
            data[key].rows = []
            this.chartData[key].forEach(item => {
              let record = {}
              if (item.answer === undefined) {
                record['option'] = '未知'
                record['num'] = ++item.num - 1
              } else {
                record['option'] = item.answer
                record['num'] = item.num
              }
              data[key].rows.push(record)
            })
          } else {
            data[key].empty = true
            data[key].columns = ['option', 'num']
            data[key].rows = []
            data[key].rows.push({'option': '', 'num': 0})
          }
        }
        return data
      }
    },
    methods: {
      requestList () {
        this.chartLoading = true
        const search = Object.assign({}, this.search.condition)
        Api.showPie({search: search}, response => {
          let status = response.status || 0
          let body = response.data.map || {}
          if (status === 200 || status === 204) {
            this.chartData = body.data
            this.title = body.title
            // 获取答题人数
            this.answerPeople = body.numData
          } else {
            this.chartData = []
            this.$message.error(response.data.error || '数据获取失败')
          }
          this.chartLoading = false
        })
      },
      updateConditions (conditions) {
        this.search.condition = conditions
        this.requestList()
      },
      echartRow () {
        let condition = ''
        if (this.$route.query.surveyId !== undefined) {
          let surveyId = 'surveyId=' + this.$route.query.surveyId
          if (condition === '') {
            condition = '?' + surveyId
          } else {
            condition = condition + '&' + surveyId
          }
        }
        if (this.search.condition.title !== undefined) {
          let title = 'title=' + this.search.condition.title
          if (condition === '') {
            condition = '?' + title
          } else {
            condition = condition + '&' + title
          }
        }
        if (this.search.condition.question !== undefined) {
          let question = 'question=' + this.search.condition.question
          if (condition === '') {
            condition = '?' + question
          } else {
            condition = condition + '&' + question
          }
        }
        if (this.search.condition.senderName !== undefined) {
          let senderName = 'senderName=' + this.search.condition.senderName
          if (condition === '') {
            condition = '?' + senderName
          } else {
            condition = condition + '&' + senderName
          }
        }
        if (condition === '') {
          window.location.href = '/rest/customer/platform/surveyStatistics/files'
        } else {
          window.location.href = '/rest/customer/platform/surveyStatistics/files' + condition
        }
      },
      handleSizeChange (val) {
        this.table.pagination.pageSize = val
        this.requestList()
      },
      handleCurrentChange (val) {
        this.table.pagination.page = val
        this.requestList()
      }
    }
  }
</script>

<style scoped>
</style>
